<template>
  <view class="page">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="change"></u-tabs>
    <view class="account-form-box">
      <u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth="80" :borderBottom="true">
        <u-form-item :label="$t('issues')" prop="payType" :borderBottom="true">
          <u-radio-group v-model="radio" @change="radioGroupChange">
            <u-radio :customStyle="{marginRight: '8px'}"
			shape="circle" v-for="(item, index) in radioList" :key="index" :name="''+index+''" :label="item.name"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item :label="$t('content')" prop="menotext" :borderBottom="true">
		  <u--textarea v-model="model.menotext" :placeholder="$t('content')" count maxlength="500"></u--textarea>
        </u-form-item>
        <u-form-item :label="$t('screenshot')" :border-bottom="false">
			<u-upload
			:fileList="fileList1"
			@afterRead="afterRead"
			@delete="deletePic"
			name="1"
			multiple
			:maxCount="10"
			width="50"
			height="50"
			></u-upload>
        </u-form-item>
      </u--form>

      <u-gap height="40"></u-gap>

      <u-button type="primary" @click="submit">{{$t('submit')}}</u-button>
    </view>

    <u-gap height="40"></u-gap>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { chooseImage,uploadFilePromise } from '@/plugins/upload/upload';
import { api_faceback_add } from '@/config/api.js';

export default {
  data() {
    return {

      tabslist: [
        {
          name: this.$t('feedback'),
        }
      ],
	  fileList1: [],
      tabscurrent: 0,
      model: {
        menotext: "",
        payType: "",
      },
      radioList: [{
          name: this.$t('dysfunction'),
          checked: false,
          disabled: false,
        },
        {
          name: this.$t('recommendation'),
          checked: false,
          disabled: false,
        },
        {
          name: this.$t('Other'),
          checked: false,
          disabled: false,
        },],
      radio: "",
      rules: {
        payType: [
          {
            required: true,
            message: this.$t('selectquestion'),
            trigger: "change",
          },
        ],
        menotext: [
          {
            required: true,
            message: this.$t('beempty'),
            trigger: ["change", "blur"],
          },
          {
            min: 10,
            max: 1000,
            message: this.$t('tooshort'),
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad() {
	  uni.setNavigationBarTitle({title: this.$t('pagetitle.feedback')});
  },
  methods: {
    radioGroupChange(e) {
		console.log(e)
      this.model.payType = e;
    },
    submit() {
      this.$refs.uForm.validate().then(res => {
		
			let images = []
			this.fileList1.map((item) => {
				images.push({
					...item.url,
					status: 1
				})
			})
			api_faceback_add({
				type:this.model.payType,
				title:'app反馈',
				email:'',
				content:this.model.menotext,
				url:JSON.stringify(images)
			}).then((res) => {
				this.model={}
				this.fileList1=[]
				this.$tools.msg(this.$t('3ksfeedback'))
			}).catch((err) =>{})
		
		
      }).catch(errors => {})
    },
	
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: this.$t('uploading')
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFilePromise(lists[i].url,2)
					console.log('result',result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

		
	
  },

};
</script>

<style lang="scss" scoped>
.account-form-box {
  padding: 0 32rpx;
}
</style>
